@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");

body {
  margin: 0px auto;
  padding: 0px;
  color: #1f272b;
  font-family: cursive;
  font-size: 17px;
}

.box {
  padding: 0px;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #b7d6eb;
}

.header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.header>input {
  margin-top: 20px;
  height: 40px;
  width: 71%;
  border-radius: 20px;
  border: 2px solid rgb(255, 255, 255);
  outline: none;
  padding-left: 20px;
  box-shadow: 7px 8px 9px rgba(1, 86, 114, 0.5);
  font-size: 15px;
  background-color: #c4dced;
  color: #3e515a;
  font-family: cursive;
}

.main {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
  height: 83vh;
}

.main-left {
  width: 18%;
  border-radius: 10px;
  border: 2px solid rgb(255, 255, 255);
  padding: 10px;
  box-shadow: 7px 8px 9px rgba(1, 86, 114, 0.5);
  background-color: #c4dced;
  text-align: center;
}

.main-right {
  width: 50%;
  border-radius: 10px;
  border: 2px solid rgb(255, 255, 255);
  padding: 10px;
  box-shadow: 7px 8px 9px rgba(1, 86, 114, 0.5);
  background-color: #c4dced;
  overflow: auto;
}

.left-image {
  width: 120px;
  border: 2px solid rgb(255, 255, 255);
  border-radius: 100%;
  margin-top: 20px;
  box-shadow: 7px 8px 9px rgba(1, 86, 114, 0.5);
}

.left-title {
  margin-top: 20px;
  cursor: pointer;
  height: 30px;
  line-height: 30px;

}

.active {
  background-color: #a5bbca;
}

.right-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #a5bbca;
}

.maxwidth {
  width: 100%;
}

.todoupdateinput {
  width: 98%;
  height: 30px;
  border: none;
  outline: none;
  background-color: #ffffff;
  padding-left: 15px;
  border-radius: 2px;
}

.item-icon {
  font-size: 20px;
}

.newtitlestyle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bookmark-dash-icon{
  color: #ff8400;
}
.bookmark-icon{
  color: #0744c9;
}
.trash-icon{
  color: #13c909;
}

.fill-icon {
  color: red;
  margin-left: -24px
}